<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<title></title>


		<style>
			.box {
				width: 100px;
				height: 150px;
				border: 1px solid #444;
				/* background-color: aliceblue; */
			}



			
			/* 浏览器宽度 范围在这里的时候  */
			@media (min-width:500px) and (max-width:800px) {

				.box {
					background-color: rgb(88, 0, 0);
				}

			}


			@media (min-width:801px) {

				.box {
					background-color: rgb(188, 0, 0);
				}

			}
		</style>
	</head>
	<!-- 
	 
	 
	 
	 min-width 浏览器最小宽度 
	 max-width 浏览器最大宽度 
	 
	 @media  screen  (A) and  (B) {
		 
	 }
	 
	
	 -->
	<body>


		<div class="box">

		</div>
	</body>
</html>
